<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harmony - 本地音乐管理播放平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#7B61FF',
            dark: '#1C1C28',
            light: '#F5F7FA',
            'neutral-100': '#F9FAFB',
            'neutral-200': '#F3F4F6',
            'neutral-300': '#E5E7EB',
            'neutral-400': '#D1D5DB',
            'neutral-500': '#9CA3AF',
            'neutral-600': '#6B7280',
            'neutral-700': '#4B5563',
            'neutral-800': '#374151',
            'neutral-900': '#1F2937',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
            'card-hover': '0 10px 30px rgba(22, 93, 255, 0.15)',
            'player': '0 -10px 25px rgba(0, 0, 0, 0.05)',
          }
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .bg-blur {
        backdrop-filter: blur(8px);
      }
      .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      .animate-slide-up {
        animation: slideUp 0.4s ease-out;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      .music-visualizer {
        display: flex;
        align-items: flex-end;
        gap: 1px;
        height: 16px;
      }
      .music-visualizer span {
        width: 2px;
        background-color: theme('colors.primary');
        border-radius: 1px;
        animation: equalize 1s infinite ease-in-out;
      }
      @keyframes equalize {
        0%, 100% { height: 4px; }
        50% { height: 16px; }
      }
      .music-visualizer span:nth-child(2) { animation-delay: -0.9s; }
      .music-visualizer span:nth-child(3) { animation-delay: -0.8s; }
      .music-visualizer span:nth-child(4) { animation-delay: -0.7s; }
      .music-visualizer span:nth-child(5) { animation-delay: -0.6s; }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
  </style>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-neutral-100 font-inter text-neutral-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="header">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <div class="text-primary text-2xl">
          <i class="fa-solid fa-music"></i>
        </div>
        <h1 class="text-xl font-bold text-primary">Harmony</h1>
      </div>
      
      <div class="hidden md:flex items-center space-x-6">
        <a href="#" class="font-medium text-primary border-b-2 border-primary px-1 py-4">音乐库</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">播放列表</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">艺术家</a>
        <a href="#" class="font-medium text-neutral-600 hover:text-primary transition-colors px-1 py-4">专辑</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <div class="relative hidden md:block">
          <input type="text" placeholder="搜索音乐、艺术家或专辑..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-64 transition-all">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
        </div>
        
        <button id="theme-toggle" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-regular fa-moon text-neutral-700"></i>
        </button>
        
        <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-bars text-neutral-700"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t border-neutral-200 animate-fade-in">
      <div class="container mx-auto px-4 py-2">
        <a href="#" class="block py-3 px-2 font-medium text-primary border-l-4 border-primary">音乐库</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">播放列表</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">艺术家</a>
        <a href="#" class="block py-3 px-2 font-medium text-neutral-600 hover:text-primary hover:bg-neutral-50 transition-colors">专辑</a>
        <div class="relative mt-3 mb-2">
          <input type="text" placeholder="搜索音乐..." class="pl-10 pr-4 py-2 rounded-full bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-full">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-6 flex flex-col md:flex-row gap-6">
    <!-- 侧边栏 -->
    <aside class="md:w-1/5 lg:w-1/6 space-y-6">
      <!-- 目录选择区域 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-folder-open text-primary mr-2"></i>
          音乐目录
        </h2>
        <div class="space-y-3">
          <button id="select-folder-btn" class="w-full py-2.5 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all flex items-center justify-center space-x-2 shadow-sm hover:shadow">
            <i class="fa-solid fa-plus"></i>
            <span>选择音乐目录</span>
          </button>
          
          <div id="selected-folder" class="hidden">
            <div class="bg-neutral-50 rounded-lg p-3 text-sm border border-neutral-200">
              <div class="font-medium text-neutral-700 mb-1">当前目录</div>
              <div id="folder-path" class="text-neutral-600 truncate">/path/to/your/music</div>
            </div>
          </div>
          
          <!-- 新增：文件拖放区域 -->
          <div id="file-drop-area" class="border-2 border-dashed border-neutral-300 rounded-lg p-4 text-center hover:border-primary transition-colors cursor-pointer mt-2">
            <p class="text-sm text-neutral-600 mb-1">或拖放音乐文件到此处</p>
            <div class="flex justify-center space-x-2">
              <span class="text-xs text-neutral-500">支持格式：</span>
              <span class="text-xs text-neutral-500">MP3</span>
              <span class="text-xs text-neutral-500">•</span>
              <span class="text-xs text-neutral-500">WAV</span>
              <span class="text-xs text-neutral-500">•</span>
              <span class="text-xs text-neutral-500">FLAC</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 播放列表 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.1s">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-list text-primary mr-2"></i>
          播放列表
        </h2>
        <div class="space-y-2 max-h-60 overflow-y-auto scrollbar-hide">
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="all">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa-solid fa-music text-sm"></i>
              </div>
              <span class="font-medium text-sm">所有音乐</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="favorites">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-secondary/10 flex items-center justify-center text-secondary">
                <i class="fa-solid fa-heart text-sm"></i>
              </div>
              <span class="font-medium text-sm">喜欢的音乐</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <div class="flex items-center justify-between playlist-item cursor-pointer" data-playlist="recent">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded bg-neutral-100 flex items-center justify-center text-neutral-600">
                <i class="fa-solid fa-headphones text-sm"></i>
              </div>
              <span class="font-medium text-sm">最近播放</span>
            </div>
            <span class="text-xs text-neutral-500">0</span>
          </div>
          
          <button id="new-playlist-btn" class="w-full py-2 text-sm text-neutral-600 hover:text-primary transition-colors flex items-center justify-center">
            <i class="fa-solid fa-plus-circle mr-1"></i>
            <span>新建播放列表</span>
          </button>
        </div>
      </div>
      
      <!-- 艺术家 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.2s">
        <h2 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fa-solid fa-user text-primary mr-2"></i>
          热门艺术家
        </h2>
        <div class="space-y-3">
          <div class="text-sm text-neutral-500 italic">
            暂无艺术家数据
          </div>
        </div>
      </div>
    </aside>
    
    <!-- 音乐内容区 -->
    <section class="md:w-4/5 lg:w-5/6 space-y-6">
      <!-- 欢迎区域 -->
      <div class="bg-gradient-to-r from-primary/90 to-secondary/90 rounded-2xl p-6 text-white shadow-lg animate-fade-in">
        <div class="flex flex-col md:flex-row items-center justify-between">
          <div class="mb-6 md:mb-0">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow mb-2">欢迎使用Harmony</h2>
            <p class="text-white/80 mb-4 max-w-lg">请选择本地音乐目录或拖放音乐文件，开始享受你的私人音乐库</p>
            <div class="flex flex-wrap gap-3">
              <button id="shuffle-play-btn" class="py-2.5 px-5 bg-white text-primary rounded-lg font-medium hover:bg-neutral-100 transition-all shadow-sm hover:shadow flex items-center space-x-2 opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-shuffle"></i>
                <span>随机播放</span>
              </button>
              <button id="recent-play-btn" class="py-2.5 px-5 bg-white/20 backdrop-blur-sm text-white rounded-lg font-medium hover:bg-white/30 transition-all flex items-center space-x-2 opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-clock-rotate-left"></i>
                <span>最近播放</span>
              </button>
            </div>
          </div>
          <div class="relative w-full md:w-64 h-64 md:h-auto hidden md:block">
            <img src="https://picsum.photos/400/400?random=10" alt="音乐" class="w-full h-full object-cover rounded-xl shadow-lg">
            <div class="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center">
              <div class="text-center">
                <i class="fa-solid fa-music text-white text-5xl mb-3"></i>
                <p class="text-white/80">添加音乐开始播放</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 最近添加 -->
      <div class="animate-fade-in" style="animation-delay: 0.2s">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-xl font-bold">最近添加</h2>
          <a href="#" class="text-primary text-sm font-medium hover:underline flex items-center opacity-50 cursor-not-allowed">
            <span>查看全部</span>
            <i class="fa-solid fa-chevron-right ml-1 text-xs"></i>
          </a>
        </div>
        
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
          <!-- 专辑卡片 -->
          <div class="bg-white rounded-xl shadow-card overflow-hidden hover:shadow-card-hover transition-all duration-300 transform hover:-translate-y-1 opacity-50 cursor-not-allowed">
            <div class="relative">
              <img src="https://picsum.photos/300/300?random=5" alt="专辑封面" class="w-full aspect-square object-cover">
              <div class="absolute inset-0 bg-black/30 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
                <button class="w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-lg transform hover:scale-110 transition-transform">
                  <i class="fa-solid fa-play text-white"></i>
                </button>
              </div>
            </div>
            <div class="p-3">
              <h3 class="font-medium text-sm truncate">暂无专辑</h3>
              <p class="text-xs text-neutral-500 truncate">添加音乐以显示</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 音乐列表 -->
      <div class="bg-white rounded-xl shadow-card p-5 animate-fade-in" style="animation-delay: 0.3s">
        <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
          <h2 class="text-xl font-bold mb-2 md:mb-0">所有音乐</h2>
          <div class="flex items-center space-x-3">
            <div class="relative">
              <input type="text" id="music-search" placeholder="搜索音乐..." class="pl-10 pr-4 py-2 rounded-lg bg-neutral-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 w-full md:w-64" disabled>
              <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"></i>
            </div>
            <div class="flex items-center space-x-1">
              <button id="view-grid-btn" class="p-2 rounded-lg bg-neutral-100 text-neutral-600 hover:bg-neutral-200 transition-colors opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-th-large"></i>
              </button>
              <button id="view-list-btn" class="p-2 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors opacity-50 cursor-not-allowed">
                <i class="fa-solid fa-list"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="text-left text-neutral-500 text-sm border-b border-neutral-200">
                <th class="pb-3 font-medium w-12">
                  <input type="checkbox" class="rounded text-primary focus:ring-primary" disabled>
                </th>
                <th class="pb-3 font-medium">标题</th>
                <th class="pb-3 font-medium hidden md:table-cell">艺术家</th>
                <th class="pb-3 font-medium hidden sm:table-cell">专辑</th>
                <th class="pb-3 font-medium hidden lg:table-cell">时长</th>
                <th class="pb-3 font-medium text-right">操作</th>
              </tr>
            </thead>
            <tbody id="music-list">
              <!-- 空状态 -->
              <tr>
                <td colspan="6" class="py-12 text-center">
                  <div class="flex flex-col items-center">
                    <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mb-4">
                      <i class="fa-solid fa-music text-2xl text-neutral-400"></i>
                    </div>
                    <h3 class="text-lg font-medium text-neutral-700 mb-1">暂无音乐文件</h3>
                    <p class="text-neutral-500 mb-4">请选择本地音乐目录或拖放音乐文件到此处</p>
                    <button id="empty-add-music-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all flex items-center space-x-2">
                      <i class="fa-solid fa-plus"></i>
                      <span>添加音乐</span>
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </main>

  <!-- 音乐播放器 -->
  <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-player z-40 opacity-50 cursor-not-allowed">
    <div class="container mx-auto px-4">
      <div class="flex flex-col lg:flex-row items-center justify-between py-3">
        <!-- 当前播放音乐信息 -->
        <div class="flex items-center space-x-3 w-full lg:w-auto mb-3 lg:mb-0">
          <img id="current-track-cover" src="https://picsum.photos/40/40?random=12" alt="当前播放" class="w-12 h-12 rounded object-cover shadow-sm">
          <div class="hidden sm:block">
            <div id="current-track-title" class="font-medium text-sm">暂无播放</div>
            <div id="current-track-artist" class="text-xs text-neutral-500">添加音乐开始播放</div>
          </div>
          <button class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-regular fa-heart"></i>
          </button>
        </div>
        
        <!-- 播放控制 -->
        <div class="flex flex-col items-center w-full lg:w-2/3">
          <div class="flex items-center space-x-6 mb-2">
            <button id="shuffle-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-random"></i>
            </button>
            <button id="prev-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-step-backward"></i>
            </button>
            <button id="play-pause-btn" class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center shadow-md hover:bg-primary/90 transition-all transform hover:scale-105">
              <i class="fa-solid fa-play"></i>
            </button>
            <button id="next-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-step-forward"></i>
            </button>
            <button id="repeat-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
              <i class="fa-solid fa-repeat"></i>
            </button>
          </div>
          
          <div class="flex items-center space-x-2 w-full max-w-2xl">
            <span id="current-time" class="text-xs text-neutral-500">0:00</span>
            <div class="relative w-full h-1.5 bg-neutral-200 rounded-full cursor-pointer" id="progress-bar">
              <div class="absolute left-0 top-0 bottom-0 w-0 bg-primary rounded-full" id="progress-fill"></div>
              <div class="absolute left-0 top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-sm transform hover:scale-110 transition-transform" id="progress-dot"></div>
            </div>
            <span id="total-time" class="text-xs text-neutral-500">0:00</span>
          </div>
        </div>
        
        <!-- 音量控制 -->
        <div class="hidden lg:flex items-center space-x-3 w-auto">
          <button id="mute-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-solid fa-volume-up"></i>
          </button>
          <div class="relative w-24 h-1.5 bg-neutral-200 rounded-full cursor-pointer" id="volume-bar">
            <div class="absolute left-0 top-0 bottom-0 w-[70%] bg-neutral-400 rounded-full" id="volume-fill"></div>
            <div class="absolute left-[70%] top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-sm transform hover:scale-110 transition-transform" id="volume-dot"></div>
          </div>
          <button id="playlist-btn" class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
            <i class="fa-solid fa-list"></i>
          </button>
        </div>
      </div>
    </div>
  </footer>

  <!-- 音乐文件选择对话框 -->
  <div id="folder-select-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 animate-slide-up">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">选择音乐目录</h3>
        <button id="close-modal-btn" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <div class="mb-6">
        <p class="text-neutral-600 mb-4">请选择包含音乐文件的文件夹，系统将自动扫描并导入所有支持的音乐文件。</p>
        
        <div class="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer" id="drop-area">
          <i class="fa-solid fa-music text-3xl text-neutral-400 mb-2"></i>
          <p class="text-neutral-600 mb-1">拖放文件夹到此处</p>
          <p class="text-xs text-neutral-500">或者</p>
          <button id="browse-folder-btn" class="mt-2 text-primary font-medium hover:underline">浏览文件夹</button>
          <input type="file" id="file-input" class="hidden" webkitdirectory directory multiple>
        </div>
      </div>
      
      <div class="flex justify-end space-x-3">
        <button id="cancel-select-btn" class="py-2 px-4 border border-neutral-300 rounded-lg font-medium hover:bg-neutral-50 transition-colors">
          取消
        </button>
        <button id="confirm-select-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors" disabled>
          确认
        </button>
      </div>
    </div>
  </div>

  <!-- 新建播放列表对话框 -->
  <div id="new-playlist-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md p-6 animate-slide-up">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold">新建播放列表</h3>
        <button id="close-playlist-modal-btn" class="p-2 rounded-full hover:bg-neutral-100 transition-colors">
          <i class="fa-solid fa-times"></i>
        </button>
      </div>
      
      <div class="mb-6">
        <label for="playlist-name" class="block text-sm font-medium text-neutral-700 mb-2">播放列表名称</label>
        <input type="text" id="playlist-name" class="w-full px-4 py-2 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-primary/30" placeholder="请输入播放列表名称">
        <p class="mt-2 text-xs text-neutral-500">播放列表名称不能为空</p>
      </div>
      
      <div class="flex justify-end space-x-3">
        <button id="cancel-playlist-btn" class="py-2 px-4 border border-neutral-300 rounded-lg font-medium hover:bg-neutral-50 transition-colors">
          取消
        </button>
        <button id="create-playlist-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
          创建
        </button>
      </div>
    </div>
  </div>

  <!-- 音频元素 -->
  <audio id="audio-player" src=""></audio>

  <script>
    // 音乐数据
    let musicData = [];
    
    // 播放列表数据
    const playlists = {
      all: [],
      favorites: [],
      recent: [],
      // 动态创建的播放列表将存储在这里
    };

    // 当前播放列表和索引
    let currentPlaylist = 'all';
    let currentIndex = 0;
    let isPlaying = false;
    let isShuffle = false;
    let repeatMode = 'none'; // none, one, all
    
    // 已选择的文件夹
    let selectedFolder = null;

    // DOM元素
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const themeToggle = document.getElementById('theme-toggle');
    const header = document.getElementById('header');
    const selectFolderBtn = document.getElementById('select-folder-btn');
    const folderSelectModal = document.getElementById('folder-select-modal');
    const closeModalBtn = document.getElementById('close-modal-btn');
    const cancelSelectBtn = document.getElementById('cancel-select-btn');
    const browseFolderBtn = document.getElementById('browse-folder-btn');
    const fileInput = document.getElementById('file-input');
    const folderPath = document.getElementById('folder-path');
    const musicList = document.getElementById('music-list');
    const musicSearch = document.getElementById('music-search');
    const playPauseBtn = document.getElementById('play-pause-btn');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');
    const shuffleBtn = document.getElementById('shuffle-btn');
    const repeatBtn = document.getElementById('repeat-btn');
    const progressBar = document.getElementById('progress-bar');
    const progressFill = document.getElementById('progress-fill');
    const progressDot = document.getElementById('progress-dot');
    const currentTime = document.getElementById('current-time');
    const totalTime = document.getElementById('total-time');
    const volumeBar = document.getElementById('volume-bar');
    const volumeFill = document.getElementById('volume-fill');
    const volumeDot = document.getElementById('volume-dot');
    const muteBtn = document.getElementById('mute-btn');
    const currentTrackTitle = document.getElementById('current-track-title');
    const currentTrackArtist = document.getElementById('current-track-artist');
    const currentTrackCover = document.getElementById('current-track-cover');
    const newPlaylistBtn = document.getElementById('new-playlist-btn');
    const newPlaylistModal = document.getElementById('new-playlist-modal');
    const closePlaylistModalBtn = document.getElementById('close-playlist-modal-btn');
    const cancelPlaylistBtn = document.getElementById('cancel-playlist-btn');
    const createPlaylistBtn = document.getElementById('create-playlist-btn');
    const playlistName = document.getElementById('playlist-name');
    const audioPlayer = document.getElementById('audio-player');
    const playlistBtn = document.getElementById('playlist-btn');
    const shufflePlayBtn = document.getElementById('shuffle-play-btn');
    const recentPlayBtn = document.getElementById('recent-play-btn');
    const emptyAddMusicBtn = document.getElementById('empty-add-music-btn');
    const fileDropArea = document.getElementById('file-drop-area');
    const confirmSelectBtn = document.getElementById('confirm-select-btn');

    // 初始化
    function init() {
      // 事件监听器
      mobileMenuButton.addEventListener('click', toggleMobileMenu);
      themeToggle.addEventListener('click', toggleTheme);
      window.addEventListener('scroll', handleScroll);
      selectFolderBtn.addEventListener('click', openFolderSelectModal);
      closeModalBtn.addEventListener('click', closeFolderSelectModal);
      cancelSelectBtn.addEventListener('click', closeFolderSelectModal);
      browseFolderBtn.addEventListener('click', openFileBrowser);
      fileInput.addEventListener('change', handleFolderSelect);
      folderSelectModal.addEventListener('click', closeModalOnClickOutside);
      
      // 音乐播放控制
      playPauseBtn.addEventListener('click', togglePlayPause);
      prevBtn.addEventListener('click', playPrevious);
      nextBtn.addEventListener('click', playNext);
      shuffleBtn.addEventListener('click', toggleShuffle);
      repeatBtn.addEventListener('click', toggleRepeat);
      progressBar.addEventListener('click', seek);
      volumeBar.addEventListener('click', adjustVolume);
      muteBtn.addEventListener('click', toggleMute);
      
      // 搜索功能
      musicSearch.addEventListener('input', handleSearch);
      
      // 新建播放列表
      newPlaylistBtn.addEventListener('click', openNewPlaylistModal);
      closePlaylistModalBtn.addEventListener('click', closeNewPlaylistModal);
      cancelPlaylistBtn.addEventListener('click', closeNewPlaylistModal);
      createPlaylistBtn.addEventListener('click', createNewPlaylist);
      
      // 音频事件
      audioPlayer.addEventListener('timeupdate', updateProgress);
      audioPlayer.addEventListener('loadedmetadata', updateTotalTime);
      audioPlayer.addEventListener('ended', handleTrackEnd);
      
      // 空状态下的添加音乐按钮
      emptyAddMusicBtn.addEventListener('click', openFolderSelectModal);
      
      // 拖放功能
      setupDragDrop();
      
      // 启用音乐文件拖放
      setupMusicFileDrop();
    }
    
    // 移动端菜单切换
    function toggleMobileMenu() {
      mobileMenu.classList.toggle('hidden');
    }
    
    // 主题切换
    function toggleTheme() {
      document.body.classList.toggle('dark');
      const icon = themeToggle.querySelector('i');
      if (icon.classList.contains('fa-moon')) {
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun');
      } else {
        icon.classList.remove('fa-sun');
        icon.classList.add('fa-moon');
      }
    }
    
    // 滚动效果
    function handleScroll() {
      if (window.scrollY > 10) {
        header.classList.add('shadow');
        header.classList.remove('shadow-sm');
      } else {
        header.classList.remove('shadow');
        header.classList.add('shadow-sm');
      }
    }
    
    // 文件夹选择相关
    function openFolderSelectModal() {
      folderSelectModal.classList.remove('hidden');
    }
    
    function closeFolderSelectModal() {
      folderSelectModal.classList.add('hidden');
    }
    
    function openFileBrowser() {
      fileInput.click();
    }
    
    function handleFolderSelect(e) {
      if (e.target.files.length > 0) {
        const folder = e.target.files[0].webkitRelativePath.split('/')[0];
        folderPath.textContent = folder;
        selectedFolder = e.target.files[0];
        confirmSelectBtn.disabled = false;
      }
    }
    
    function closeModalOnClickOutside(e) {
      if (e.target === folderSelectModal) {
        closeFolderSelectModal();
      }
    }
    
    // 设置拖放功能
    function setupDragDrop() {
      const dropArea = document.getElementById('drop-area');
      
      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
      });
      
      function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
      }
      
      ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
      });
      
      ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
      });
      
      function highlight() {
        dropArea.classList.add('border-primary');
        dropArea.classList.add('bg-primary/5');
      }
      
      function unhighlight() {
        dropArea.classList.remove('border-primary');
        dropArea.classList.remove('bg-primary/5');
      }
      
      dropArea.addEventListener('drop', handleDrop, false);
      
      function handleDrop(e) {
        const dt = e.dataTransfer;
        const items = dt.items;
        
        if (items) {
          for (let i = 0; i < items.length; i++) {
            if (items[i].kind === 'file') {
              const entry = items[i].webkitGetAsEntry();
              if (entry && entry.isDirectory) {
                // 处理文件夹
                folderPath.textContent = entry.name;
                selectedFolder = entry;
                confirmSelectBtn.disabled = false;
                break;
              }
            }
          }
        }
      }
    }
    
    // 设置音乐文件拖放
    function setupMusicFileDrop() {
      // 阻止默认行为
      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        fileDropArea.addEventListener(eventName, preventDefaults, false);
        document.body.addEventListener(eventName, preventDefaults, false);
      });
      
      function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
      }
      
      // 高亮效果
      ['dragenter', 'dragover'].forEach(eventName => {
        fileDropArea.addEventListener(eventName, highlightDropArea, false);
      });
      
      ['dragleave', 'drop'].forEach(eventName => {
        fileDropArea.addEventListener(eventName, unhighlightDropArea, false);
      });
      
      function highlightDropArea() {
        fileDropArea.classList.add('border-primary');
        fileDropArea.classList.add('bg-primary/5');
      }
      
      function unhighlightDropArea() {
        fileDropArea.classList.remove('border-primary');
        fileDropArea.classList.remove('bg-primary/5');
      }
      
      // 处理文件拖放
      fileDropArea.addEventListener('drop', handleFileDrop, false);
      
      function handleFileDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        
        if (files.length > 0) {
          // 过滤音乐文件
          const musicFiles = Array.from(files).filter(file => {
            const ext = file.name.split('.').pop().toLowerCase();
            return ['mp3', 'wav', 'flac', 'ogg'].includes(ext);
          });
          
          if (musicFiles.length > 0) {
            processMusicFiles(musicFiles);
          } else {
            showNotification('未找到支持的音乐文件', 'error');
          }
        }
      }
    }
    
    // 处理音乐文件
    function processMusicFiles(files) {
      showNotification(`正在处理 ${files.length} 个音乐文件...`, 'info');
      
      // 为每个文件创建音乐对象
      const newMusicItems = [];
      
      files.forEach((file, index) => {
        // 模拟获取音乐元数据
        const musicItem = {
          id: Date.now() + index, // 使用时间戳生成唯一ID
          title: file.name.replace(/\.[^/.]+$/, ''), // 移除文件扩展名
          artist: '未知艺术家',
          album: '未知专辑',
          duration: '0:00',
          cover: 'https://picsum.photos/40/40?random=' + (index + 1),
          file: URL.createObjectURL(file), // 创建文件URL
          favorite: false,
          originalFile: file // 保存原始文件引用
        };
        
        newMusicItems.push(musicItem);
        
        // 异步加载音频以获取时长
        const audio = new Audio();
        audio.src = musicItem.file;
        audio.onloadedmetadata = function() {
          const duration = formatTime(audio.duration);
          musicItem.duration = duration;
          
          // 如果这是第一个处理的文件，且当前没有播放的音乐，则播放它
          if (index === 0 && musicData.length === 0) {
            musicData.push(musicItem);
            playlists.all.push(musicItem);
            updateMusicList();
            currentIndex = 0;
            setAudioSource(currentIndex);
            playMusic();
          } else {
            // 否则更新音乐列表
            updateMusicList();
          }
        };
      });
      
      // 添加到音乐数据和播放列表
      musicData = [...musicData, ...newMusicItems];
      playlists.all = [...musicData];
      
      // 更新界面
      updateMusicList();
      updatePlaylistsCount();
      
      // 启用所有功能
      enableMusicPlayerFeatures();
      
      showNotification(`成功导入 ${newMusicItems.length} 首音乐`, 'success');
    }
    
    // 启用音乐播放器功能
    function enableMusicPlayerFeatures() {
      // 启用搜索框
      musicSearch.disabled = false;
      
      // 启用视图切换按钮
      document.getElementById('view-grid-btn').classList.remove('opacity-50', 'cursor-not-allowed');
      document.getElementById('view-list-btn').classList.remove('opacity-50', 'cursor-not-allowed');
      
      // 启用随机播放和最近播放按钮
      shufflePlayBtn.classList.remove('opacity-50', 'cursor-not-allowed');
      recentPlayBtn.classList.remove('opacity-50', 'cursor-not-allowed');
      
      // 启用音乐播放器
      document.querySelector('footer').classList.remove('opacity-50', 'cursor-not-allowed');
    }
    
    // 音乐播放控制
    function setAudioSource(index) {
      if (playlists[currentPlaylist].length === 0) return;
      
      const track = playlists[currentPlaylist][index];
      audioPlayer.src = track.file;
      currentTrackTitle.textContent = track.title;
      currentTrackArtist.textContent = track.artist;
      currentTrackCover.src = track.cover;
      
      // 更新音乐列表中的播放状态
      updatePlayingState(track.id);
      
      // 添加到最近播放
      addToRecent(track);
    }
    
    function playMusic(index = currentIndex) {
      if (playlists[currentPlaylist].length === 0) return;
      
      currentIndex = index;
      setAudioSource(currentIndex);
      audioPlayer.play().then(() => {
        isPlaying = true;
        playPauseBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
      }).catch(error => {
        console.error("播放失败:", error);
        showNotification('播放失败，请尝试其他文件', 'error');
      });
    }
    
    function togglePlayPause() {
      if (playlists[currentPlaylist].length === 0) return;
      
      if (isPlaying) {
        audioPlayer.pause();
        isPlaying = false;
        playPauseBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
      } else {
        audioPlayer.play().then(() => {
          isPlaying = true;
          playPauseBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
        }).catch(error => {
          console.error("播放失败:", error);
          showNotification('播放失败，请尝试其他文件', 'error');
        });
      }
    }
    
    function playPrevious() {
      if (playlists[currentPlaylist].length === 0) return;
      
      if (isShuffle) {
        currentIndex = Math.floor(Math.random() * playlists[currentPlaylist].length);
      } else {
        currentIndex = (currentIndex - 1 + playlists[currentPlaylist].length) % playlists[currentPlaylist].length;
      }
      playMusic(currentIndex);
    }
    
    function playNext() {
      if (playlists[currentPlaylist].length === 0) return;
      
      if (isShuffle) {
        currentIndex = Math.floor(Math.random() * playlists[currentPlaylist].length);
      } else {
        currentIndex = (currentIndex + 1) % playlists[currentPlaylist].length;
      }
      playMusic(currentIndex);
    }
    
    function toggleShuffle() {
      isShuffle = !isShuffle;
      shuffleBtn.classList.toggle('text-primary', isShuffle);
    }
    
    function toggleRepeat() {
      if (repeatMode === 'none') {
        repeatMode = 'all';
        repeatBtn.innerHTML = '<i class="fa-solid fa-repeat"></i>';
        repeatBtn.classList.add('text-primary');
      } else if (repeatMode === 'all') {
        repeatMode = 'one';
        repeatBtn.innerHTML = '<i class="fa-solid fa-repeat-1"></i>';
      } else {
        repeatMode = 'none';
        repeatBtn.innerHTML = '<i class="fa-solid fa-repeat"></i>';
        repeatBtn.classList.remove('text-primary');
      }
    }
    
    function handleTrackEnd() {
      if (repeatMode === 'one') {
        // 单曲循环
        audioPlayer.currentTime = 0;
        audioPlayer.play();
      } else if (repeatMode === 'all' || isShuffle) {
        // 列表循环或随机播放
        playNext();
      } else {
        // 不循环，播放停止
        isPlaying = false;
        playPauseBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
      }
    }
    
    // 更新进度条
    function updateProgress() {
      const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
      progressFill.style.width = `${percent}%`;
      progressDot.style.left = `${percent}%`;
      currentTime.textContent = formatTime(audioPlayer.currentTime);
    }
    
    // 调整进度
    function seek(e) {
      if (isNaN(audioPlayer.duration)) return;
      
      const progressBarRect = progressBar.getBoundingClientRect();
      const clickPosition = e.clientX - progressBarRect.left;
      const percent = (clickPosition / progressBarRect.width) * 100;
      const seekTime = (percent / 100) * audioPlayer.duration;
      
      audioPlayer.currentTime = seekTime;
    }
    
    // 调整音量
    function adjustVolume(e) {
      const volumeBarRect = volumeBar.getBoundingClientRect();
      const clickPosition = e.clientX - volumeBarRect.left;
      const percent = Math.max(0, Math.min(100, (clickPosition / volumeBarRect.width) * 100));
      
      audioPlayer.volume = percent / 100;
      volumeFill.style.width = `${percent}%`;
      volumeDot.style.left = `${percent}%`;
      
      // 更新静音图标
      if (audioPlayer.volume === 0) {
        muteBtn.innerHTML = '<i class="fa-solid fa-volume-off"></i>';
      } else if (audioPlayer.volume < 0.5) {
        muteBtn.innerHTML = '<i class="fa-solid fa-volume-down"></i>';
      } else {
        muteBtn.innerHTML = '<i class="fa-solid fa-volume-up"></i>';
      }
    }
    
    // 切换静音
    function toggleMute() {
      if (audioPlayer.volume > 0) {
        audioPlayer.dataset.volume = audioPlayer.volume;
        audioPlayer.volume = 0;
        volumeFill.style.width = '0%';
        volumeDot.style.left = '0%';
        muteBtn.innerHTML = '<i class="fa-solid fa-volume-off"></i>';
      } else {
        const volume = parseFloat(audioPlayer.dataset.volume) || 0.7;
        audioPlayer.volume = volume;
        volumeFill.style.width = `${volume * 100}%`;
        volumeDot.style.left = `${volume * 100}%`;
        
        if (volume < 0.5) {
          muteBtn.innerHTML = '<i class="fa-solid fa-volume-down"></i>';
        } else {
          muteBtn.innerHTML = '<i class="fa-solid fa-volume-up"></i>';
        }
      }
    }
    
    // 更新总时长
    function updateTotalTime() {
      totalTime.textContent = formatTime(audioPlayer.duration);
    }
    
    // 格式化时间
    function formatTime(seconds) {
      if (isNaN(seconds)) return '0:00';
      
      const minutes = Math.floor(seconds / 60);
      seconds = Math.floor(seconds % 60);
      
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
    
    // 更新音乐列表
    function updateMusicList() {
      if (musicData.length === 0) {
        musicList.innerHTML = `
          <tr>
            <td colspan="6" class="py-12 text-center">
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 bg-neutral-100 rounded-full flex items-center justify-center mb-4">
                  <i class="fa-solid fa-music text-2xl text-neutral-400"></i>
                </div>
                <h3 class="text-lg font-medium text-neutral-700 mb-1">暂无音乐文件</h3>
                <p class="text-neutral-500 mb-4">请选择本地音乐目录或拖放音乐文件到此处</p>
                <button id="empty-add-music-btn" class="py-2 px-4 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all flex items-center space-x-2">
                  <i class="fa-solid fa-plus"></i>
                  <span>添加音乐</span>
                </button>
              </div>
            </td>
          </tr>
        `;
        return;
      }
      
      musicList.innerHTML = '';
      
      playlists[currentPlaylist].forEach((music, index) => {
        const isPlaying = index === currentIndex && audioPlayer.paused === false;
        const favoriteIcon = music.favorite ? 
          '<i class="fa-solid fa-heart text-primary"></i>' : 
          '<i class="fa-regular fa-heart"></i>';
        
        const row = document.createElement('tr');
        row.className = `border-b border-neutral-100 hover:bg-neutral-50 transition-colors music-item ${isPlaying ? 'bg-primary/5' : ''}`;
        row.dataset.id = music.id;
        
        row.innerHTML = `
          <td class="py-3">
            <input type="checkbox" class="rounded text-primary focus:ring-primary">
          </td>
          <td class="py-3">
            <div class="flex items-center space-x-3">
              <img src="${music.cover}" alt="${music.title}" class="w-10 h-10 rounded object-cover">
              <div>
                <div class="font-medium ${isPlaying ? 'text-primary' : ''}">${music.title}</div>
                <div class="text-xs text-neutral-500 hidden sm:block">${music.artist}</div>
              </div>
              ${isPlaying ? 
                '<div class="ml-2 music-visualizer"><span></span><span></span><span></span><span></span><span></span></div>' : 
                ''}
            </div>
          </td>
          <td class="py-3 hidden md:table-cell">${music.artist}</td>
          <td class="py-3 hidden sm:table-cell">${music.album}</td>
          <td class="py-3 hidden lg:table-cell">${music.duration}</td>
          <td class="py-3 text-right">
            <div class="flex items-center justify-end space-x-2">
              <button class="p-2 rounded-full hover:bg-neutral-100 transition-colors add-to-favorites-btn">
                ${favoriteIcon}
              </button>
              <button class="p-2 rounded-full hover:bg-neutral-100 text-neutral-600 transition-colors">
                <i class="fa-solid fa-ellipsis-h"></i>
              </button>
            </div>
          </td>
        `;
        
        musicList.appendChild(row);
        
        // 添加事件监听器
        row.addEventListener('click', (e) => {
          if (!e.target.closest('button') && !e.target.closest('input')) {
            playMusic(index);
          }
        });
        
        // 收藏按钮
        const favoriteBtn = row.querySelector('.add-to-favorites-btn');
        favoriteBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          toggleFavorite(music.id);
        });
      });
    }
    
    // 更新播放状态